<template>
  <div class="left-container">
    <header class="header">
      <img class="header-avatar" :src="userInfo.avatar || state.defaultAvatar" alt="" />
      <span class="header-name">{{ userInfo.name }}</span>
    </header>
    <nav class="menu-box">
      <el-row
        v-for="item in state.dataList"
        :key="item.value"
        class="item"
        @click="onActive(item.value)"
        :class="{ active: state.activeValue === item.value }"
      >
        <el-col :span="4"><i class="iconfont" :class="item.icon"></i></el-col>
        <el-col :span="20">{{ item.label }}</el-col>
      </el-row>
    </nav>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Itype } from '@/type'
import useCurrentInstance from '@/utils/useCurrentInstance'
import Bus from '@/utils/bus'
const { proxy } = useCurrentInstance()
const state = reactive({
  activeValue: 1,
  userLoading: false,
  defaultAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
  // 菜单选项
  dataList: [
    {
      icon: 'icona-yonghugeren',
      label: '账号信息',
      value: 1
    }
  ]
})
/**
 *
 * @desc:获取登录用户信息
 */
let userInfo: Itype = ref({})
const getUserInfo = () => {
  userInfo.value = proxy.$GetUserInfo()
}
getUserInfo()
/**
 * @desc:获取用户信息
 */
Bus.on('updateUserInfo', () => {
  userInfo.value = proxy.$GetUserInfo()
})
/**
 * @desc:跳转页面
 */
const onActive = (data: number) => {
  state.activeValue = data
}
</script>

<style lang="less" scoped>
.left-container {
  width: 16%;
  min-width: 150px;
  height: 336px;
  padding-top: 32px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 8px;
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    .header-avatar {
      width: 40px;
      height: 40px;
      background: #e6e9f0;
      border-radius: 20px;
    }
    .header-name {
      margin-top: 8px;
      color: #2a2f3d;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
    }
  }
  .menu-box {
    padding: 24px 12px;
    box-sizing: border-box;
    .item {
      display: flex;
      align-items: center;
      height: 40px;
      margin-top: 8px;
      padding: 0 13px;
      border-radius: 6px;
      transition: 0.3s;
      cursor: pointer;
    }
    .active {
      background: #e8f0fe;
    }
  }
}
@media (max-width: 1000px) {
  .left-container {
    width: 0;
    display: none;
  }
}
</style>